<template>
  <view class="notice">
    <!-- 导航条 -->
    <view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
      <view
        class="cu-bar fixed bg-bgcolor"
        :style="{
          height: $wanlshop.wanlsys().height + 'px',
          paddingTop: $wanlshop.wanlsys().top + 'px',
        }"
      >
        <view class="action">
          <text class="wlIcon-fanhui1" style="margin-left: 0" @tap="$wanlshop.back(1)"></text>
          <!-- #ifdef MP -->
          <text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/user/setting/notice')"></text>
          <!-- #endif -->
        </view>
        <view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }"> 消息中心 </view>
        <!-- #ifndef MP -->
        <view class="action">
          <text class="wlIcon-qingkong" @tap="empty()"></text>
          <text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/user/setting/notice')"></text>
        </view>
        <!-- #endif -->
      </view>
    </view>

    <view class="wanl-notice bg-bgcolor">
      <view class="tool">
        <view class="text-sm margin-right" v-if="statistics.notice.chat > 0"
          >{{ statistics.notice.chat }}条 未读消息</view
        >
        <view class="text-sm margin-right" v-else>没有未读消息</view>
        <!-- #ifdef MP -->
        <view class="text-sm" @tap="empty()"
          ><view class="cu-tag round sm margin-right-xs wlIcon-qingkong"></view>全部已读</view
        >
        <!-- #endif -->
      </view>
      <view class="mode padding-bj">
        <view class="flex text-sm wanl-pip shadow-warp">
          <view class="logistics" @tap="$wanlshop.auth('/pages/notice/logistics/logistics')">
            <text class="wlIcon-wuliuqiache2"></text>
            交易物流
            <view class="cu-tag badge" v-if="statistics.notice.order != 0">{{ statistics.notice.order }}</view>
          </view>
          <view class="notice" @tap="$wanlshop.auth('/pages/notice/notify/notify')">
            <text class="wlIcon-tongzhi"></text>
            通知消息
            <view class="cu-tag badge" v-if="statistics.notice.notice != 0">{{ statistics.notice.notice }}</view>
          </view>
          <view class="Interaction" @tap="$wanlshop.to('/pages/notice/system/system')">
            <text class="wlIcon-liuyan-fill"></text>
            系统消息
          </view>
        </view>
      </view>
    </view>

    <view class="wanl-msg" v-if="chat.list.length != 0">
      <view class="cu-list menu-avatar">
        <view
          class="cu-item"
          v-for="(item, index) in chat.list"
          :key="index"
          @tap="toChat(item.id)"
          :class="modalName == 'move-box-' + item.id ? 'move-cur' : ''"
          @touchstart="ListTouchStart"
          @touchmove="ListTouchMove"
          @touchend="ListTouchEnd"
          :data-target="'move-box-' + item.id"
        >
          <view
            class="cu-avatar round lg"
            :style="{ backgroundImage: 'url(' + $wanlshop.oss(item.avatar, 100, 100) + ')' }"
          ></view>
          <view class="content">
            <view class="wanl-black">{{ item.name }}</view>
            <view class="wanl-gray text-sm flex">
              <view class="text-cut wanl-gray-light">
                {{ item.content }}
              </view>
            </view>
          </view>
          <view class="action">
            <view class="text-gray text-sm">{{ $wanlshop.timeToChat(item.createtime) }}</view>
            <view class="cu-tag bg-red" v-if="item.count > 0">{{ item.count }}</view>
          </view>
          <view class="move">
            <view class="bg-red" @tap.stop="del(index)">删除本地</view>
          </view>
        </view>
      </view>
    </view>

    <wanl-empty src="notice_default3x" text="还没有任何消息" v-else />
    <view class="edgeInsetBottom"></view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return {
      modalName: null,
      listTouchStart: 0,
      listTouchDirection: null,
    };
  },
  computed: {
    ...mapState(['chat', 'statistics']),
  },
  methods: {
    ...mapActions({
      del: 'chat/del', // 删除消息记录
      empty: 'chat/empty', // 清空角标
    }),
    ListTouchStart(e) {
      this.listTouchStart = e.touches[0].pageX;
    },
    ListTouchMove(e) {
      this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
    },
    ListTouchEnd(e) {
      if (this.listTouchDirection == 'left') {
        this.modalName = e.currentTarget.dataset.target;
      } else {
        this.modalName = null;
      }
      this.listTouchDirection = null;
    },
  },
};
</script>

<style>
.cu-bar .search-form {
  background-color: #f2f2f2;
}
/* #ifdef MP */
.cu-bar .search-form {
  margin: 0 0 0 25rpx;
}
/* #endif */
</style>
